<template>
  <div ref="mapViewDiv" class="mapView-root"></div>
</template>
<script>
import FeatureLayer from "esri/layers/FeatureLayer";
import Map from "esri/Map";
import DotDensityRenderer from "esri/renderers/DotDensityRenderer";
import MapView from "esri/views/MapView";
import WebMap from "esri/WebMap";
import SceneView from "esri/views/SceneView";
import Legend from "esri/widgets/Legend";
import Bookmarks from "esri/widgets/Bookmarks";
import Expand from "esri/widgets/Expand";
import Editor from "esri/widgets/Editor";
import { ref, onMounted } from "vue";

export default {
  name: "EsriMap",
  props: {
    radius: {
      type: Number,
      default: 60,
    },
  },
  setup() {
    var map = new Map({
      basemap: "topo-vector",
      ground: "world-elevation", // show elevation
    });
    let mapViewDiv = ref("mapViewDiv");
    onMounted(() => {
      var view = new SceneView({
        container: mapViewDiv.value,
        map: map,
        camera: {
          position: {
            // observation point
            x: -118.808,
            y: 33.961,
            z: 25000, // altitude in meters
          },
          tilt: 65, // perspective in degrees
        },
      });
    });

    return { mapViewDiv };
  }, //end setup
};
</script>
<style scoped>
.mapView:focus,
.mapView-root:focus {
  outline: none !important;
}

.mapView-root {
  background-color: blueviolet;
  width: 100%;
  height: 800px;
}
</style>
